<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background: black;
		}
		div{
			width: 670px;
			height: 450px;
			margin: 100px auto;
			background: black;
			border: 1px solid white;
		}
		img{
			width: 200px;
			height: 200px;
			margin: 10px;
			filter: grayscale(150%);
		}
		.active{
			filter: grayscale(50%);
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="./zy/wd.jpg" class="active">
		<img src="./zy/zzz.jpg" class="active">
		<img src="./zy/os.jpg" class="active">
		<img src="./zy/bt.jpg" class="active">
		<img src="./zy/b2.jpg" class="active">
		<img src="./zy/b3.jpg" class="active">
	</div>
	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		$('.box').mouseenter(function() {
			$('.box img').removeClass('active')
		})
		$('.box').mouseleave(function() {
			$('.box img').addClass('active')
		})
		$('.box img').hover(function() {
			$(this).addClass('active').siblings().removeClass('active')
		})
	</script>
</body>
</html>